import React, { useState } from "react"
import "./morescene.css"
import { Link, useParams, useNavigate, useLocation } from "react-router-dom"
import { getSceneList } from "../../api/home"
import { InfiniteScroll, List } from 'antd-mobile'

function Morescene() {
    let navigate = useNavigate();//链接跳转

    let [sceneList, setSceeList] = React.useState(null)
    let [Num, editNum] = React.useState(18)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    React.useEffect(() => {
        getSceneList(Num).then(data => {
            // console.log(data.data.data);
            setSceeList(data.data.data)
            setPage(data.data.total)
            // console.log(Num < data.data.total);

        })
    }, [])


    return page ? (
        <div className="morescene" >



            <div className="top">
                <div className="left">
                    <ul>
                        <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                    </ul>
                </div>
                <div>场景</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>
            <div className="main-page" >
                <div className="page-scene-list">
                    <List>
                        <ul>
                            {
                                sceneList && sceneList.map(item => {
                                    return (
                                        <li key={item.scene_id}>
                                            <>

                                                <Link to={'/detailsscene/' + item.scene_id}>
                                                    <img src={item.scene_background} />
                                                    <div className="sub-text">
                                                        <div className="sub-title">#{item.scene_title}#</div>
                                                        <div className="sub-nub">{item.dish_count}道菜</div>
                                                    </div>
                                                    <div className="bg"></div>
                                                    <div className="tip">NEW</div>
                                                </Link>

                                            </>
                                        </li>

                                    )
                                })
                            }

                        </ul>
                    </List>
                    <InfiniteScroll loadMore={async () => {
                        setTimeout(() => {
                            Editflag(true)

                        }, 2000)
                        // console.log(flag);
                        Num += 6
                        editNum(Num)
                        // console.log(Num);
                        await getSceneList(Num).then(data => {
                            // console.log(data);
                            setSceeList(data.data.data)

                        })
                        setTimeout(() => {
                            Editflag(false)

                        }, 2000)


                    }} hasMore={flag == false && Num < page}
                        threshold={50}
                    />
                    {/* <p className="more"> 加载更多</p> */}
                </div>
            </div>
        </div>
    ) : null
}

export default Morescene;